<!-- 异常分析 -->
<template>
  <div class='container-abnormal'>
    <line-logo :name="$i18n.t('mesProduceStatistic.abnormalAnalysis')" />
    <div v-if="!noData" class="barChart" ref="barChart"></div>
    <el-empty v-else :image-size="200"></el-empty>
  </div>
</template>

<script>
import 'echarts-liquidfill'
import * as echarts from "echarts";
import LineLogo from "./line-logo.vue";
export default {
  name: '',
  components: { LineLogo },
  data() {
    return {
      chart: null,
      noData:false,
    };
  },
  methods: {
    init(data) {
      let [x, y1, y2, rate] = [[], [], [], []];
      data.map((ite) => {
        x.push(ite.faultName);
        y1.push(ite.ngnum);
        y2.push(ite.closenum);
        rate.push(ite.closerate);
      });
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: { bottom: 30 },
        legend: { data: [$i18n.t('mesProduceStatistic.abnormalQuantity'), $i18n.t('mesProduceStatistic.turnoverQuantity'), $i18n.t('mesProduceStatistic.closingRate')] },
        xAxis: [
          {
            type: 'category',
            data: x,
            axisPointer: { type: 'shadow' }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: $i18n.t("mesProduceStatistic.amount"),
            min: 0,
            // max: 100,
            interval: 20,
          },
          {
            type: 'value',
            name: $i18n.t('mesProduceStatistic.closingRate2'),
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {formatter: '{value}%'}
          }
        ],
        series: [
          {
            name: $i18n.t("mesProduceStatistic.abnormalQuantity"),
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#FFA66A' // 0% 处的颜色
                }, {
                  offset: 1, color: '#EE607E' // 100% 处的颜色
                }]
              },
              borderRadius: [4, 4, 0, 0]
            },
            data: y1
          },
          {
            name: $i18n.t("mesProduceStatistic.turnoverQuantity"),
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(49, 218, 255, 1)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(29, 130, 255, 1)' // 100% 处的颜色
                }],
              },
              borderRadius: [4, 4, 0, 0]
            },
            data: y2
          },
          {
            name: $i18n.t("mesProduceStatistic.closingRate"),
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + '%';
              }
            },
            data: rate
          }
        ]
      };
      this.$nextTick(() => {
        this.chart = echarts.init(this.$refs.barChart);
        this.chart.setOption(option);
      })
    },
  }
}
</script>
<style scoped lang='scss' >
.container-abnormal {
  background: #fff;
  width: calc(50% - 5px);
  height: 450px;
  margin-top: 12px;
  padding: 12px 10px;

  .barChart {
    height: calc(100% - 30px);
    width: 100%;
    padding-top: 25px;
  }
}
</style>